<template>
	<view class="mine">
		<!-- 新增我的地址跳转 -->
		<view class='user_info1'>
			<image v-if="userInfo.userImgSrc" :src='userInfo.userImgSrc' class="touxiang"
				@click="chooseAndUploadAvatar"></image>
			<image v-else src="/static/8LfaQcDrWd.jpg" class="touxiang" @click="chooseAndUploadAvatar">
			</image>
			<view class="name">{{userInfo.userName}}
				<view class="phone">
					{{userInfo.phone}}
				</view>
			</view>
			<!-- 新增地址管理按钮 -->
			<view class="address-btn" @click="goToAddress">
				<uni-icons type="location" size="24"></uni-icons>
				<text>我的地址</text>
			</view>
		</view>
		<view class="blank">
		</view>
		<view class="user_info2">
			<view class="coupon">
				<view class="number">
					3
				</view>
				<view class="text">
					优惠券
				</view>
			</view>
			<view class="points">
				<view class="number2">
					232
				</view>
				<view class="text2">
					积分
				</view>
			</view>
			<view class="balance">
				<view class="number3">
					413.2
				</view>
				<view class="text3">
					余额
				</view>
			</view>
		</view>
		<view class="blank">
		</view>
		<view class="order">
			<view class="first">
				<view class="">
					我的订单
				</view>
				<view class="text4">
					<text @click="allOrders">查找所有订单</text>
				</view>
			</view>
			<view class="orderchoose">
				<view class="fourth" @click="jump(0)">
					<view class="commentIcon">
						<h-icon-e-commerce icon="h-qingdan" class=""></h-icon-e-commerce>
					</view>
					<view class="comment">
						全部
					</view>
				</view>
				<view class="second" @click="jump(1)">

					<view class="payIcon">
						<h-icon-e-commerce icon="h-qianbao" class=""></h-icon-e-commerce>
					</view>
					<view class="pay">
						待支付
					</view>
				</view>
				<view class="third" @click="jump(2)">
					<view class="harvestIcon">
						<h-icon-e-commerce icon="h-shangcheng" class=""></h-icon-e-commerce>
					</view>
					<view class="harvest">
						待收货
					</view>
				</view>

				<view class="fifth" @click="jump(3)">
					<view class="moneyIcon">
						<h-icon-e-commerce icon="h-kefu" class=""></h-icon-e-commerce>
					</view>
					<view class="money">
						待评价
					</view>
				</view>
			</view>
		</view>
		<view class="blank">
		</view>
		<view class="moudle">
			<view class="moudle1">
				<view class="moudle11">
					生鲜农场
				</view>
				<view class="moudle12">
					0元养鱼
				</view>
			</view>
			<view class="blank1">

			</view>

			<view class="moudle2">
				<view class="moudle21">
					生鲜农场
				</view>
				<view class="moudle22">
					0元养鱼
				</view>
			</view>
		</view>
		<view class="last">
			<view class="shoppingCart">
				<view class="shoppingCartIcon">
					<h-icon-e-commerce icon="h-gouwuche" class=""></h-icon-e-commerce>
				</view>
				<view class="shoppingCartText">
					购物车
				</view>
			</view>
			<view class="redEnvelope">
				<view class="redEnvelopeIcon">
					<h-icon-e-commerce icon="h-hongbao" class=""></h-icon-e-commerce>
				</view>
				<view class="redEnvelopeText">
					红包
				</view>
			</view>
			<view class="member">
				<view class="memberIcon">
					<h-icon-e-commerce icon="h-huiyuan" class=""></h-icon-e-commerce>
				</view>
				<view class="memberText">
					会员
				</view>
			</view>
			<view class="collection">
				<view class="collectionIcon">
					<h-icon-e-commerce icon="h-shoucang" class=""></h-icon-e-commerce>
				</view>
				<view class="collectionText">
					收藏
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'

	export default {
		data() {
			return {
				userInfo: {
					id: '',
					userImgSrc: '',
					userName: '',
					phone: ''
				},


			};
		},
		methods: {
			chooseAndUploadAvatar() {
				uni.chooseImage({ // 选择图片
					count: 1,
					success: (res) => { // 图片选择成功的回调（必传），会返回一个对象
						uni.uploadFile({
							url: 'http://127.0.0.1:8081/user/imgLoad', // 注意要写全路径
							header: {
								'Content-Type': 'application/json',
								// 可添加token等认证信息
								'Authorization': uni.getStorageSync('jwt')

							},
							filePath: res.tempFilePaths[0],
							name: 'file', // 这里的name要和后端参数名一致
							success: (uploadFileRes) => {
								// 这里uploadFileRes.data就是后端返回的数据
								uni.showToast({
									title: '上传成功',
									icon: 'success'
								})
								this.queryUserInfo();
								console.log(this.userInfo.userImgSrc)
							}
						})
					}
				})
			},
			async queryUserInfo() {
				try {
					const res = await request({
						url: "user/queryUserInfo",
						method: 'get',

					});
					this.userInfo = res.data
					console.log(this.userInfo.userImgSrc)
				} catch (error) {
					console.error("请求失败:", error);
				}
			},
			allOrders() {

				uni.navigateTo({
					url: '/pages/myOrders/myOrders'
				})
			},
			jump(index) {
				uni.navigateTo({
					url: '/pages/myOrders/myOrders?index=' + index
				})
			},
			// 新增跳转方法
			goToAddress() {
				uni.navigateTo({
					url: '/pages/myAddress/myAddress'
				})
			
			},
		},

		async onLoad() {
			try {
				this.queryUserInfo();
				const res = await request({
					url: "orderUser/queryOrder",
					method: 'POST',
					data: 0

				});

			} catch (error) {
				console.error("请求失败:", error);
			}
		},
	}
</script>

<style lang="scss">
	/* 新增样式 */
	.user_info1 {
		position: relative;
	}

	.address-btn {
		position: absolute;
		right: 20rpx;
		top: 50%;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: 24rpx;
		color: #666;
	}

	.mine {
		.user_info1 {
			background-color: white;
			display: flex;

			.touxiang {
				margin-left: 30rpx;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.name {
				margin-left: 30rpx;
				font-size: 40rpx;
			}
		}

		.blank {
			width: 100%;
			height: 20rpx;

		}

		.user_info2 {
			display: flex;
			background-color: white;

			.coupon {
				margin-left: 30rpx;
				width: 200rpx;
				height: 130rpx;

				.number {
					font-size: 40rpx;
					text-align: center;
				}

				.text {
					font-size: 40rpx;
					text-align: center;
				}
			}

			.points {
				margin-left: 50rpx;
				width: 200rpx;
				height: 130rpx;

				.number2 {
					font-size: 40rpx;
					text-align: center;
				}

				.text2 {
					font-size: 40rpx;
					text-align: center;
				}
			}

			.balance {
				margin-left: 50rpx;
				width: 200rpx;
				height: 130rpx;

				.number3 {
					font-size: 40rpx;
					text-align: center;
				}

				.text3 {
					font-size: 40rpx;
					text-align: center;
				}
			}
		}

		.order {

			background-color: white;
			width: 100%;
			height: 300rpx;

			.first {
				display: flex;

				.text4 {
					position: fixed;
					right: 10rpx;

				}
			}

			.orderchoose {
				display: flex;

				.second {
					margin-top: 20rpx;
					margin-left: 30rpx;
					text-align: center;

					.pay {}

					.payIcon {}
				}

				.third {
					margin-top: 20rpx;
					margin-left: 30rpx;
					text-align: center;

					.harvest {}

					.harvestIcon {}
				}

				.fourth {
					margin-top: 20rpx;
					margin-left: 30rpx;
					text-align: center;

					.comment {}

					.commentIcon {}

				}

				.fifth {
					margin-top: 20rpx;
					margin-left: 30rpx;
					text-align: center;

					.money {}

					.moneyIcon {}
				}
			}
		}

		.moudle {
			display: flex;


			.moudle1 {
				margin-left: 30rpx;
				background-color: white;
				width: 50%;
				height: 150rpx;
				text-align: center;
			}

			.blank1 {
				width: 20rpx;
				height: 30rpx;
			}

			.moudle2 {
				margin-right: 30rpx;
				background-color: white;
				width: 50%;
				height: 150rpx;
				text-align: center;

			}
		}

		.last {
			margin-top: 20rpx;
			background-color: white;
			width: 100%;
			height: 250rpx;
			display: flex;

			.shoppingCart {
				margin-top: 15rpx;
				margin-left: 30rpx;
				text-align: center;
			}

			.redEnvelope {
				margin-top: 15rpx;
				margin-left: 30rpx;
				text-align: center;
			}

			.member {
				margin-top: 15rpx;
				margin-left: 30rpx;
				text-align: center;
			}

			.collection {
				margin-top: 15rpx;
				margin-left: 30rpx;
				text-align: center;
			}
		}
	}
</style>